<template>
    <div>
        <el-row>
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
                <el-form-item label="请输入优惠券名称">
                    <el-input v-model="formInline.couponName" placeholder="请输入优惠券名称"></el-input>
                </el-form-item>
                <el-form-item label="请输入用户名">
                    <el-input v-model="formInline.memberName" placeholder="请输入用户名"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">查询</el-button>
                </el-form-item>
            </el-form>
        </el-row>
        <el-row>
            <el-table
                    :data="tableData"
                    style="width: 100%">
                <el-table-column
                        prop="chId"
                        label="#">
                </el-table-column>
                <el-table-column
                        prop="couponName"
                        label="优惠券名称">
                </el-table-column>
                <el-table-column
                        prop="memberName"
                        label="使用者用户名">
                </el-table-column>
                <el-table-column
                        prop="couponCode"
                        label="优惠码">
                </el-table-column>
                <el-table-column
                        prop="amount"
                        label="优惠卷金额">
                </el-table-column>
                <el-table-column prop="getType" label="获取类型">
                    <template slot-scope="scope">{{scope.row.getType ===0 ?'后台赠送':'主动获取'}}</template>
                </el-table-column>
                <el-table-column prop="startTime" label="创建时间" :formatter="formatterTime" >
                    <template slot-scope="scope">
                        <i class="el-icon-time"></i>
                        <span style="margin-left: 10px">{{(scope.row.startTime.split(` `)[0])}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="useStatus" label="使用状态">
                    <template slot-scope="scope">
                        <span v-if="scope.row.useStatus === 0"><el-button size="mini" type="info">已使用</el-button></span>
                        <span v-if="scope.row.useStatus === 1"><el-button size="mini" type="primary">未使用</el-button></span>
                        <span v-if="scope.row.useStatus === 2"><el-button size="mini" type="warning">已过期</el-button></span>
                    </template>
                </el-table-column>
                <el-table-column prop="useTime" label="使用时间" >
                    <template slot-scope="scope">
                        <i class="el-icon-time"></i>
                        <span style="margin-left: 10px">{{(scope.row.useTime.split(` `)[0])}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="orderId"
                        label="订单ID">
                </el-table-column>
                <el-table-column
                        prop="orderNo"
                        label="订单编号">
                </el-table-column>
                <el-table-column label="操作" width="180">
                    <template slot-scope="scope">
                        <!--<el-button
                                size="mini"
                                @click="handleEdit(scope.$index, scope.row)">编辑
                        </el-button>-->
                        <el-button
                                size="mini"
                                type="danger"
                                @click="handleDelete(scope.$index, scope.row)">删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-row>
        <el-row>
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[2,3,5,10]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </el-row>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                tableData: [],
                sex: '',
                level: '',
                status: '',
                currentPage: 1,
                total: 100,
                formInline: {couponName: ``,memberName:``},
                pageSize: 5,
                dialogVisible: false,
                isEndTime: true,
                form: {
                    chId: 0,
                    couponName: "",
                    memberName: "",
                    couponCode: "",
                    amount: 0.0,
                    getType: 0,
                    startTime: "",
                    useStatus: 0,
                    useTime: "",
                    orderId: 1,
                    orderNo: ""
                },
                rules: {
                }
            }
        },
        filters:{
            startTime:function(val){
                console.log(val)
            },
            useTime:function(val){
                console.log(val)
            },

        },
        // 初始化数据  mounted()
        created: function () {
            this.loadData();
        },
        methods: {
            //封装数据请求
            loadData() {
                let _this = this;
                this.$http.post("/ms/couponHistory/query?pageNo=" + this.currentPage + "&pageSize=" + this.pageSize, this.formInline)
                    .then((response) => {
                        _this.tableData = response.data.t.list;
                        _this.total = response.data.t.total;
                    })
            },
            //时间处理
            formatterTime(row,column){
                let data = row[column.property]
                return  /\d{4}-\d{1,2}-\d{1,2}/g.exec(data )
            },
            //处理编辑
            handleEdit(index, row) {
                this.form = {
                    chId: 0,
                    couponName: "",
                    memberName: "",
                    couponCode: "",
                    amount: 0.0,
                    getType: 0,
                    startTime: "",
                    useStatus: 0,
                    useTime: "",
                    orderId: 1,
                    orderNo: ""
                }
                this.dialogVisible = true;
                if(row!==undefined){
                    this.form = JSON.parse(JSON.stringify(row))
                }
            },
            //处理删除
            handleDelete(index, row) {

            },
            //分页 每页数量变化时处理
            handleSizeChange(val) {
                this.pageSize = val;
                this.currentPage = 1;
                this.loadData();
            },
            //分页 第几页变化时处理
            handleCurrentChange(val) {
                this.currentPage = val;
                this.loadData();
            },
            //点击查询方法
            onSubmit() {
                this.currentPage = 1;
                this.loadData();
                this.formInline={couponName: ``,memberName:``}
            },
        }
    }
</script>

<style scoped>

</style>